<template lang="html">
  <div class="music_play">
    <div class="nav-head">
      <p><img src="../../../assets/images/icon-return45.png"></p>
      <div class="title">歌手</div>
    </div>
    <div class="music-sort">
      <div class="area">
        <div class="title">地区</div>
          <ul class="kinds">
            <li>内地</li>
            <li>港台</li>
            <li>欧美</li>
            <li>日本</li>
            <li>韩国</li>
          </ul>
      </div>
      <div class="types">
        <div class="title">种类</div>
          <ul class="kinds">
            <li>流行</li>
            <li>嘻哈</li>
            <li>民谣</li>
            <li>电子</li>
            <li>摇滚</li>
          </ul>
      </div>
      <div class="ways">
        <div class="title">方式</div>
          <ul class="kinds">
            <li class="sexn">男</li>
  					<li class="sexn">女</li>
  					<li>组合</li>
          </ul>
      </div>
      <div class="look-more">查看更多 <img src="../../../assets/images/icon-next20.png"></div>
    </div>
    <div class="MusicMenu">
      <MusicNav />
    </div>
    <div class="">
      <MusicSort />
    </div>
    <!-- 人气歌手 -->
    <div class="hot-singer">
      <h2>人气歌手</h2>
        <MusicList :key="index" v-for="(item,index) in singerListData" :singerid="item" />
    </div>
    <!-- 歌曲播放 -->
    <div class="blank">
		    <LoveSong></LoveSong>
    </div>
  </div>
</template>

<script>
  import MusicNav from "./musicNav"
  import MusicSort from "./MusicSort"
  import MusicList from "./MusicList"
  import LoveSong  from "./LoveSong"

export default {
  name:"musicSinger",
  data(){
    return{
      singerListData:["7994","7898","11701","2517","1052"]
    }
  },
  components:{
     MusicNav,
     MusicList,
     MusicSort,
     LoveSong
  },
  methods:{
    ToSingerDetaile(singerinfo){
      // console.log(tinguid);
      this.$store.dispatch('getSingerInfo',singerinfo);
      this.$router.push('/sinDet')
    }
  }
}
</script>


<style scoped>
/* sort部分样式 */
.music-play{
	overflow: hidden;
  background-color: #dbd7df;
}
.nav-head{
	width: 100%;
	height: 0.88rem;
	background:url('../../../assets/images/daohang.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
}
.nav-head img{
	display: block;
	width: 0.27rem;
	height: 0.45rem;
	position: absolute;
	left: 0.2rem;
	top: 0.215rem;
}
.nav-head .title{
	width: 100%;
	height: 0.88rem;
	text-align: center;
	font-size: 0.36rem;
	color: #fff;
	line-height: 0.88rem;
  float: left;
}
.music-sort{
	padding-top:0.32rem;
	padding-left: 0.2rem;
	background-color: #fff;
  margin-top: 0.9rem;
}
.music-sort>div>div{
	float: left;
}
.music-sort .kinds{
  list-style:none;
}
.music-sort .kinds li{
	width: 0.9rem;
	display: block;
	float: left;
	font-size: 0.3rem;
  margin-right: 0.06rem;
}
.music-sort .kinds .sexn{
	text-indent: 0.12rem;
}
.music-sort .title{
	font-size: 0.32rem;
	margin-right: 0.78rem;
}
.music-sort .area{
	margin-bottom: 0.4rem;
	overflow: hidden;
}
.music-sort .types{
	margin-bottom: 0.4rem;
	overflow: hidden;
}
.music-sort .ways{
	margin-bottom: 0.5rem;
	overflow: hidden;
}
.look-more{
	text-align: center;
	font-size: 0.28rem;
	padding-bottom: 0.38rem;
}
.look-more img{
	width: 0.12rem;
}
.hot-singer{
	width: 100%;
	margin-top: 0.2rem;
	background-color: #fff;
	overflow: hidden;
	padding-top: 0.3rem;
	// margin-bottom: 1.08rem;
}
.hot-singer h2{
	font-size: 0.4rem;
  font-weight: bold;
	margin-bottom: 0.24rem;
	margin-left: 0.5rem;
}

</style>
